<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/vant.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        #header .van-nav-bar__left {
            font-size: 24px;
        }
        
        #header .right {
            color: #1989FA;
            font-size: 17px;
        }
        
        .info {
            background: #FFFFFF;
            font-size: 16px;
            color: #21212B;
            height: 49px;
            display: flex;
            align-items: flex-end;
            padding: 0 12px;
            padding-bottom: 10px;
            box-sizing: border-box;
        }
        
        [class*=van-hairline]::after {
            border: none;
        }
        
        .line .van-tab {
            font-size: 16px;
            width: 80px;
            flex: none;
            padding: 0 12px;
        }
        
        .line .van-tab__pane {
            padding: 0 12px;
            position: relative;
            background-color: #fff;
            display: flex;
            padding: 23px 12px 24px;
        }
        
        .line .van-tab__pane::after {
            position: absolute;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            top: -50%;
            right: -50%;
            bottom: -50%;
            left: -50%;
            border: 1px solid #ebedf0;
            -webkit-transform: scale(.5);
            transform: scale(.5);
        }
        
        .van-tab__pane .left,
        .van-tab__pane .mid,
        .van-tab__pane .right {
            flex: 1;
        }
        
        .van-tab__pane .p1 {
            font-size: 12px;
            color: #52606D;
            text-align: center;
        }
        
        .van-tab__pane .p2 {
            font-size: 21px;
            font-weight: bold;
            color: #21212B;
            text-align: center;
            margin-bottom: 14px;
        }
        
        .van-tab__pane .s1 {
            font-size: 12px;
            font-weight: 400;
            color: #21212B;
            margin-top: 15px;
        }
        
        .van-tab__pane .p3 {
            font-size: 12px;
            font-weight: 400;
            color: #21212B;
            text-align: left;
            margin-top: 16px;
            padding-left: 15px;
        }
        
        .van-tab__pane .left .p4 {
            font-size: 21px;
            color: #21212B;
            text-align: left;
            margin-top: 5px;
            padding-left: 15px;
            color: #1989FA;
        }
        
        .van-tab__pane .mid .p4 {
            font-size: 21px;
            text-align: left;
            margin-top: 5px;
            padding-left: 15px;
            color: #F97A65;
        }
        
        .van-tab__pane .right .p4 {
            font-size: 21px;
            text-align: left;
            margin-top: 5px;
            padding-left: 15px;
            color: #2DC9A5;
        }
        
        .van-tab {}
        
        .van-tab__pane .mid {
            border-left: 1px solid #ebedf0;
            border-right: 1px solid #ebedf0;
        }
        
        .content {
            margin-bottom: 10px;
        }
        
        .cicle .van-tab {
            font-size: 14px;
            flex: none;
            width: 59px;
            height: 29px;
            background: #F2F2F2;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: normal;
            margin-right: 10px;
        }
        
        .cicle [class*=van-hairline]::after {
            border: none;
        }
        
        .cicle .van-tabs__nav {
            padding-left: 10px;
        }
        
        .cicle .van-tab {
            background: #F2F2F2;
        }
        
        .cicle .van-tab--active {
            background-color: rgba(0, 111, 255, 0.1);
        }
        
        #twelve {
            height: 300px;
            width: 100vw;
        }
        
        #twentyfour {
            height: 300px;
            width: 100vw;
        }
        
        .message {
            font-size: 16px;
            color: #445A6C;
            color: #445A6C;
            margin-bottom: 10px;
            padding: 0 12px;
        }
        
        .qian .van-tab__pane {
            display: block;
            margin-top: 10px;
            padding: 0;
            background-color: transparent;
        }
        
        #temperature {
            height: 300px;
            width: 100vw;
            margin-bottom: 10px;
        }
        
        #load {
            height: 300px;
            width: 100vw;
            margin-bottom: 10px;
        }
        
        #flow {
            height: 300px;
            width: 100vw;
            margin-bottom: 10px;
        }
        
        .van-cell {
            background: #F2F2F2;
            border-radius: 29px;
        }
        
        .dayInput .van-cell__title {
            width: 90px;
            flex: none;
        }
        
        .cell_box {
            padding: 0 12px;
            background-color: #fff;
        }
        /* 侧边栏 */
        
        .pic_box {
            padding: 35px 0 18px 24px;
            background-color: #fff;
            margin-bottom: 12px;
        }
        
        .nickname {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 10px;
        }
        
        .nickname .name {
            font-size: 16px;
            color: #445A6C;
        }
        
        .nickname .rule {
            width: 52px;
            height: 18px;
            background: rgba(123, 171, 233, 0.29);
            border-radius: 2px;
            font-size: 13px;
            color: #006FFF;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .p_popup.van-popup {
            background: #F5F6F7;
            display: flex;
            flex-direction: column;
            z-index: 11;
        }
        
        .location {
            display: flex;
            align-items: center;
            font-size: 16px;
            color: #6F8094;
            margin-top: 16px;
        }
        
        .location .van-icon {
            color: #006FFF;
            margin-right: 5px;
        }
        
        .p_footer {
            background-color: #fff;
            padding-left: 24px;
            padding-right: 24px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .p_cell {
            display: flex;
            align-items: center;
            height: 60px;
            font-size: 17px;
            color: #070707;
            display: flex;
            align-items: center;
            font-weight: 600;
        }
        
        .p_cell .van-icon {
            margin-right: 15px;
        }
        
        .p_footer_btn {
            display: flex;
            align-items: center;
            flex: 1;
        }
        
        .p_footer_cell {
            height: 300px;
        }
        
        .p_cell:active {
            background-color: #f2f3f5;
        }
    </style>
</head>

<body>
    <div id="root">
        <div id="body">
            <div class="info">指标分析</div>
            <div class="content">
                <van-tabs v-model="active" class="line" color="#1989FA" title-active-color="#1989FA" animated="true" line-width="44px">
                    <van-tab title="一网" name="a">
                        <div class="left">
                            <p class="p1">单位面积瞬时负荷</p>
                            <p class="p2">18.5 <span class="s1">w/㎡</span></p>
                            <p class="p3">与相似系统差值</p>
                            <p class="p4">12.3</p>
                            <p class="p3">与热网差值</p>
                            <p class="p4">12.3</p>
                        </div>
                        <div class="mid">
                            <p class="p1">单位面积瞬时负荷</p>
                            <p class="p2">18.5 <span class="s1">w/㎡</span></p>
                            <p class="p3">与相似系统差值</p>
                            <p class="p4">12.3</p>
                            <p class="p3">与热网差值</p>
                            <p class="p4">12.3</p>
                        </div>
                        <div class="right">
                            <p class="p1">单位面积瞬时负荷</p>
                            <p class="p2">18.5 <span class="s1">w/㎡</span></p>
                            <p class="p3">与相似系统差值</p>
                            <p class="p4">12.3</p>
                            <p class="p3">与热网差值</p>
                            <p class="p4">12.3</p>
                        </div>
                    </van-tab>
                    <van-tab title="二网" name="b">
                        <div class="left">
                            <p class="p1">单位面积瞬时负荷</p>
                            <p class="p2">18.5 <span class="s1">w/㎡</span></p>
                            <p class="p3">与相似系统差值</p>
                            <p class="p4">12.3</p>
                            <p class="p3">与热网差值</p>
                            <p class="p4">12.3</p>
                        </div>
                        <div class="mid">
                            <p class="p1">单位面积瞬时负荷</p>
                            <p class="p2">18.5 <span class="s1">w/㎡</span></p>
                            <p class="p3">与相似系统差值</p>
                            <p class="p4">12.3</p>
                            <p class="p3">与热网差值</p>
                            <p class="p4">12.3</p>
                        </div>
                        <div class="right">
                            <p class="p1">单位面积瞬时负荷</p>
                            <p class="p2">18.5 <span class="s1">w/㎡</span></p>
                            <p class="p3">与相似系统差值</p>
                            <p class="p4">12.3</p>
                            <p class="p3">与热网差值</p>
                            <p class="p4">12.3</p>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
            <div class="info">运行质量</div>
            <div class="content">
                <van-tabs @rendered="initEcharts12" @click="initEcharts24" v-model="activeCicle" class="cicle" line-height="0" title-active-color="#1989FA" animated="true" line-width="0">
                    <van-tab title="12h" name="a">
                        <div id="twelve">

                        </div>
                    </van-tab>
                    <van-tab title="24h" name="b">
                        <div id="twentyfour">

                        </div>
                    </van-tab>
                </van-tabs>
            </div>
            <div class="message">更多分析</div>
            <div class="content">
                <van-tabs @rendered="initEchartstemperature" v-model="active" class="line qian" color="#1989FA" title-active-color="#1989FA" animated="true" line-width="44px">
                    <van-tab title="一网" name="a">
                        <div class="info">回水温度</div>
                        <div class="cell_box">
                            <van-cell class="dayInput" title="选择日期区间" is-link arrow-direction="down" :value="date" @click="show = true"></van-cell>
                        </div>
                        <div id="temperature"></div>
                        <div class="info">单位面积瞬时负荷</div>
                        <div class="cell_box">
                            <van-cell class="dayInput" title="选择日期区间" is-link arrow-direction="down" :value="date" @click="show = true"></van-cell>
                        </div>
                        <div id="load"></div>
                        <div class="info">单位面积流量</div>
                        <div class="cell_box">
                            <van-cell class="dayInput" title="选择日期区间" is-link arrow-direction="down" :value="date" @click="show = true"></van-cell>
                        </div>
                        <div id="flow"></div>
                    </van-tab>
                    <van-tab title="二网" name="b">
                        <div class="info">指标分析</div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>

        <van-calendar v-model="show" type="range" @confirm="onConfirm"></van-calendar>
        <van-popup class="p_popup" v-model="draw" position="left" :style="{ width: '262px',height:'100%' }">
            <div class="pic_box">
                <van-image round width="52px" height="52px" src="https://img01.yzcdn.cn/vant/cat.jpeg">
                </van-image>
                <div class="nickname">
                    <div class="name">Znce1326354872</div>
                    <div class="rule">管理员</div>
                </div>
                <div class="location">
                    <van-icon name="location">
                    </van-icon>
                    <div>
                        哈尔滨
                    </div>
                </div>
            </div>
            <div class="p_footer">
                <div class="p_footer_cell">
                    <div class="p_cell">
                        <van-icon name="clock-o"> </van-icon>
                        <div>运行分析</div>
                    </div>
                    <div class="p_cell">
                        <van-icon name="clock-o"> </van-icon>
                        <div>运行数据</div>
                    </div>
                    <div class="p_cell">
                        <van-icon name="clock-o"> </van-icon>
                        <div>工艺画面</div>
                    </div>
                    <div class="p_cell">
                        <van-icon name="clock-o"> </van-icon>
                        <div>异常告警</div>
                    </div>
                    <div class="p_cell">
                        <van-icon name="clock-o"> </van-icon>
                        <div>关于我们</div>
                    </div>
                </div>
                <div class="p_footer_btn">
                    <van-button plain type="danger" block>退出登录</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</body>
<script type="text/javascript" src="../script/jQuery3.3.1.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/vant.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/fastclick.js"></script>
<script type="text/javascript" src="../script/echarts.min.js"></script>
<script type="text/javascript">
    //设备管理->变动功能 备选设备列表 不含有经纬度  主窗口
    var vm = new Vue({
        el: "#root",
        data: {
            value: "",
            active: "a",
            activeCicle: "a",
            date: '',
            show: false,
            draw: false,
        },
        mounted: function() {},
        methods: {
            onClickLeft: function() {
                this.draw = true
            },
            formatDate: function(date) {
                return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            },
            onConfirm(date) {
                console.log(date);
                var start = date[0];
                var end = date[1];
                this.show = false;
                this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
            },
            initEchartstemperature: function() {
                var temperature = echarts.init(document.getElementById("temperature"));
                var colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
                option = {
                    backgroundColor: '#fff',
                    legend: {
                        icon: 'circle',
                        top: '5%',
                        right: '5%',
                        itemWidth: 6,
                        itemGap: 20,
                        textStyle: {
                            color: '#556677'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#fff',
                        textStyle: {
                            color: '#5c6c7c'
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['5:00', '6:00', '7:00', '8:00', '9:00', '11:00', '12:00'],
                        axisLine: {
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#556677'
                            },
                            // 默认x轴字体大小
                            fontSize: 12,
                            // margin:文字到x轴的距离
                            margin: 15
                        },
                        axisPointer: {
                            label: {
                                // padding: [11, 5, 7],
                                padding: [0, 0, 10, 0],
                                // 这里的margin和axisLabel的margin要一致!
                                margin: 15,
                                // 移入时的字体大小
                                fontSize: 12,
                            }
                        },
                        boundaryGap: false
                    }],
                    yAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#556677'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }],
                    series: [{
                        name: '目标值(℃)',
                        type: 'line',
                        data: [10, 10, 30, 12, 15, 3, 7],
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(158,135,255, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[0],
                                borderColor: colorList[0]
                            }
                        }
                    }, {
                        name: '实际值(℃)',
                        type: 'line',
                        data: [5, 12, 11, 14, 25, 16, 10],
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(115,221,255, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[1],
                                borderColor: colorList[1]
                            }
                        }
                    }, {
                        name: '运行质量百分率',
                        type: 'line',
                        data: [150, 120, 170, 140, 500, 160, 110],
                        symbolSize: 1,
                        yAxisIndex: 0,
                        symbol: 'circle',
                        smooth: true,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(254,154,139, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[2],
                                borderColor: colorList[2]
                            }
                        }
                    }]
                };
                temperature.setOption(option);
                var load = echarts.init(document.getElementById("load"));
                var colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
                option = {
                    backgroundColor: '#fff',
                    legend: {
                        icon: 'circle',
                        top: '5%',
                        right: '5%',
                        itemWidth: 6,
                        itemGap: 20,
                        textStyle: {
                            color: '#556677'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#fff',
                        textStyle: {
                            color: '#5c6c7c'
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['5:00', '6:00', '7:00', '8:00', '9:00', '11:00', '12:00'],
                        axisLine: {
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#556677'
                            },
                            // 默认x轴字体大小
                            fontSize: 12,
                            // margin:文字到x轴的距离
                            margin: 15
                        },
                        axisPointer: {
                            label: {
                                // padding: [11, 5, 7],
                                padding: [0, 0, 10, 0],
                                // 这里的margin和axisLabel的margin要一致!
                                margin: 15,
                                // 移入时的字体大小
                                fontSize: 12,
                            }
                        },
                        boundaryGap: false
                    }],
                    yAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#556677'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }],
                    series: [{
                        name: '目标值(℃)',
                        type: 'line',
                        data: [10, 10, 30, 12, 15, 3, 7],
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(158,135,255, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[0],
                                borderColor: colorList[0]
                            }
                        }
                    }, {
                        name: '实际值(℃)',
                        type: 'line',
                        data: [5, 12, 11, 14, 25, 16, 10],
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(115,221,255, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[1],
                                borderColor: colorList[1]
                            }
                        }
                    }, {
                        name: '运行质量百分率',
                        type: 'line',
                        data: [150, 120, 170, 140, 500, 160, 110],
                        symbolSize: 1,
                        yAxisIndex: 0,
                        symbol: 'circle',
                        smooth: true,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(254,154,139, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[2],
                                borderColor: colorList[2]
                            }
                        }
                    }]
                };
                load.setOption(option);
                var flow = echarts.init(document.getElementById("flow"));
                var colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
                option = {
                    backgroundColor: '#fff',
                    legend: {
                        icon: 'circle',
                        top: '5%',
                        right: '5%',
                        itemWidth: 6,
                        itemGap: 20,
                        textStyle: {
                            color: '#556677'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#fff',
                        textStyle: {
                            color: '#5c6c7c'
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['5:00', '6:00', '7:00', '8:00', '9:00', '11:00', '12:00'],
                        axisLine: {
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#556677'
                            },
                            // 默认x轴字体大小
                            fontSize: 12,
                            // margin:文字到x轴的距离
                            margin: 15
                        },
                        axisPointer: {
                            label: {
                                // padding: [11, 5, 7],
                                padding: [0, 0, 10, 0],
                                // 这里的margin和axisLabel的margin要一致!
                                margin: 15,
                                // 移入时的字体大小
                                fontSize: 12,
                            }
                        },
                        boundaryGap: false
                    }],
                    yAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#556677'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }],
                    series: [{
                        name: '目标值(℃)',
                        type: 'line',
                        data: [10, 10, 30, 12, 15, 3, 7],
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(158,135,255, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[0],
                                borderColor: colorList[0]
                            }
                        }
                    }, {
                        name: '实际值(℃)',
                        type: 'line',
                        data: [5, 12, 11, 14, 25, 16, 10],
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(115,221,255, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[1],
                                borderColor: colorList[1]
                            }
                        }
                    }, {
                        name: '运行质量百分率',
                        type: 'line',
                        data: [150, 120, 170, 140, 500, 160, 110],
                        symbolSize: 1,
                        yAxisIndex: 0,
                        symbol: 'circle',
                        smooth: true,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(254,154,139, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[2],
                                borderColor: colorList[2]
                            }
                        }
                    }]
                };
                flow.setOption(option);
            },
            initEcharts12: function() {
                var twelve = echarts.init(document.getElementById("twelve"));
                var colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
                option = {
                    backgroundColor: '#fff',
                    legend: {
                        icon: 'circle',
                        top: '5%',
                        right: '5%',
                        itemWidth: 6,
                        itemGap: 20,
                        textStyle: {
                            color: '#556677'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#fff',
                        textStyle: {
                            color: '#5c6c7c'
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['5:00', '6:00', '7:00', '8:00', '9:00', '11:00', '12:00'],
                        axisLine: {
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#556677'
                            },
                            // 默认x轴字体大小
                            fontSize: 12,
                            // margin:文字到x轴的距离
                            margin: 15
                        },
                        axisPointer: {
                            label: {
                                // padding: [11, 5, 7],
                                padding: [0, 0, 10, 0],
                                // 这里的margin和axisLabel的margin要一致!
                                margin: 15,
                                // 移入时的字体大小
                                fontSize: 12,
                            }
                        },
                        boundaryGap: false
                    }],
                    yAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#556677'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }],
                    series: [{
                        name: '目标值(℃)',
                        type: 'line',
                        data: [10, 10, 30, 12, 15, 3, 7],
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(158,135,255, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[0],
                                borderColor: colorList[0]
                            }
                        }
                    }, {
                        name: '实际值(℃)',
                        type: 'line',
                        data: [5, 12, 11, 14, 25, 16, 10],
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(115,221,255, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[1],
                                borderColor: colorList[1]
                            }
                        }
                    }, {
                        name: '运行质量百分率',
                        type: 'line',
                        data: [150, 120, 170, 140, 500, 160, 110],
                        symbolSize: 1,
                        yAxisIndex: 0,
                        symbol: 'circle',
                        smooth: true,
                        showSymbol: false,
                        lineStyle: {
                            width: 5,
                            shadowColor: 'rgba(254,154,139, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[2],
                                borderColor: colorList[2]
                            }
                        }
                    }]
                };
                twelve.setOption(option);
            },
            initEcharts24: function() {
                this.$nextTick(function() {
                    var twentyfour = echarts.init(document.getElementById("twentyfour"));
                    var colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
                    option = {
                        backgroundColor: '#fff',
                        legend: {
                            icon: 'circle',
                            top: '5%',
                            right: '5%',
                            itemWidth: 6,
                            itemGap: 20,
                            textStyle: {
                                color: '#556677'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            backgroundColor: '#fff',
                            textStyle: {
                                color: '#5c6c7c'
                            }
                        },
                        xAxis: [{
                            type: 'category',
                            data: ['5:00', '6:00', '7:00', '8:00', '9:00', '11:00', '12:00'],
                            axisLine: {
                                lineStyle: {
                                    color: '#DCE2E8'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    color: '#556677'
                                },
                                // 默认x轴字体大小
                                fontSize: 12,
                                // margin:文字到x轴的距离
                                margin: 15
                            },
                            axisPointer: {
                                label: {
                                    // padding: [11, 5, 7],
                                    padding: [0, 0, 10, 0],
                                    // 这里的margin和axisLabel的margin要一致!
                                    margin: 15,
                                    // 移入时的字体大小
                                    fontSize: 12,
                                }
                            },
                            boundaryGap: false
                        }],
                        yAxis: [{
                            type: 'value',
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#DCE2E8'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#556677'
                                }
                            },
                            splitLine: {
                                show: false
                            }
                        }],
                        series: [{
                            name: '目标值(℃)',
                            type: 'line',
                            data: [10, 10, 30, 12, 15, 3, 7],
                            symbolSize: 1,
                            symbol: 'circle',
                            smooth: true,
                            yAxisIndex: 0,
                            showSymbol: false,
                            lineStyle: {
                                width: 5,
                                shadowColor: 'rgba(158,135,255, 0.3)',
                                shadowBlur: 10,
                                shadowOffsetY: 20
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[0],
                                    borderColor: colorList[0]
                                }
                            }
                        }, {
                            name: '实际值(℃)',
                            type: 'line',
                            data: [5, 12, 11, 14, 25, 16, 10],
                            symbolSize: 1,
                            symbol: 'circle',
                            smooth: true,
                            yAxisIndex: 0,
                            showSymbol: false,
                            lineStyle: {
                                width: 5,
                                shadowColor: 'rgba(115,221,255, 0.3)',
                                shadowBlur: 10,
                                shadowOffsetY: 20
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[1],
                                    borderColor: colorList[1]
                                }
                            }
                        }, {
                            name: '运行质量百分率',
                            type: 'line',
                            data: [150, 120, 170, 140, 500, 160, 110],
                            symbolSize: 1,
                            yAxisIndex: 0,
                            symbol: 'circle',
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                width: 5,

                                shadowColor: 'rgba(254,154,139, 0.3)',
                                shadowBlur: 10,
                                shadowOffsetY: 20
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[2],
                                    borderColor: colorList[2]
                                }
                            }
                        }]
                    };
                    twentyfour.setOption(option);
                })

            }
        }
    })
    apiready = function() {
        keyback()
        var header = $api.byId('header');
        $api.fixStatusBar(header);
        //监听上拉
        api.addEventListener({
            name: 'drawShow'
        }, function(ret, err) {
            vm.draw = !vm.draw
        });
    };
</script>

</html>